<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery获取DOM元素的方法</title>
</head>

<body>
    <div id="root">
        <p class="b">p1</p>
        <p>p2</p>
        <ul>
            <li>one</li>
            <li class="b">two</li>
            <li>three</li>
            <li class="a">four</li>
            <li class="five">five</li>
            <li>six</li>
            <li>seven</li>
            <li>eight</li>
            <li class="b">nine</li>
            <li>ten</li>
        </ul>
        <p class="b">p3</p>
        <p>p4</p>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script>
        let five = $(".five")   //获取到five
        five.css('text-align','center')
        // prev() 获取上一个元素
        five.prev().prev().css("background-color", "red")
        // prev() 方法可以加选择器参数，获取上一个指定的元素
        // five.prev('.a').css("background-color","red")
        // next() 获取下一个元素，该方法也可以传选择器参数
        five.next().next().css("background-color", "green")
        // siblings() 方法获取同级的所有兄弟元素
        five.siblings().css("font-size", "20px")
        // parent() 获取父元素
        five.parent().css('border','1px solid black')
        five.parent().prev().css('border','1px solid green')
        five.parent().next().css('border','1px solid red')
        // 获取父级的父级
        // five.parent().parent().css({
        //     width:'1000px',
        //     margin:'0px auto'
        // })
        // parents() 获取祖级元素，就是最外面的html标签
        // parents()方法可以传选择器参数，表示获取到指定的祖级元素
        five.parents('div').css({
            width:'1000px',
            margin:'0px auto'
        })

        let root = $("#root")   //获取到最外面的div
        // children('.b') => $("#root>.b")  相当于子选择器
        root.children('.b').css("text-decoration","underline")
        // $("#root>.b").css("text-decoration","underline")
        // find('.b') => $("#root .b")    相当于后代选择器
        root.find('.b').css('color','#369')
       
    </script>
</body>

</html>